<template>
    <view>
        <view class="bind_box">
            <view class="bind_text">绑定孩子</view>
            <view class="sex_box u-flex u-row-between u-col-center">
                <view class="sex_item u-flex u-col-center u-row-center"
                      v-for="(item,index) in sexData"
                      :key="index"
                      :class="{'active': sexSelectIndex == index}"
                      @click="changceGender(index)">
                    <image class="sex_avatar"
                           :src="item.img"
                           mode="" />
                    <view>{{ !item.gender ? '男孩':'女孩' }}</view>
                </view>
            </view>
            <view class="children_info_box">
                <u-form :model="childrenData"
                        label-position="left"
                        label-width="180"
                        ref="uForm">
                    <!-- right-icon="arrow-right" -->
                    <u-form-item label="学校">
                        <u-input v-model="schoolName"
                                 input-align="right"
                                 placeholder="请选择学校"
                                 :select-open="schoolShow"
                                 placeholder-style="text-align: right;"
                                 @click="schoolShow = true"
                                 type="select" />
                    </u-form-item>
                    <u-form-item label="班级">
                        <u-input v-model="gradeClass"
                                 input-align="right"
                                 placeholder="请选择班级"
                                 :select-open="classShow"
                                 placeholder-style="text-align: right;"
                                 @click="classShow = true"
                                 type="select" />
                    </u-form-item>
                    <u-form-item label="姓名">
                        <u-input v-model="childrenData.childrenName"
                                 input-align="right"
                                 placeholder="请输入学生姓名"
                                 placeholder-style="text-align: right;" />
                    </u-form-item>
                </u-form>
            </view>
            <u-button @click="bindChildrenClick"
                      type="primary"
                      :loading="bindLoading"
                      :disabled="disabledFun"
                      :custom-style="customStyle"
                      :ripple="true"
                      shape="circle"> 绑定 </u-button>
        </view>

        <u-select v-model="schoolShow"
                  title="选择学校"
                  :default-value="[0]"
                  safe-area-inset-bottom
                  value-name="schoolId"
                  label-name="schoolName"
                  mode="single-column"
                  :list="schoolList"
                  @confirm="schoolSelectCallback"></u-select>
        <!-- value-name和label-name，child-name-->
        <u-select v-model="classShow"
                  title="选择班级"
                  safe-area-inset-bottom
                  :default-value="[0,0]"
                  mode="mutil-column"
                  :list="classList"
                  @confirm="classSelectCallback"></u-select>
    </view>
</template>

<script>
export default {
    data() {
        return {
            childrenData: {
                childrenId: '',
                childrenName: '',
                gender: false,
                defStatus: 0,
                grade: '',
                childrenClass: '',
            },
            sexSelectIndex: 0,
            customStyle: {
                marginTop: '64rpx',
                height: '100rpx',
            },
            schoolName: '',
            gradeClass: '',
            sexData: [
                { img: require('@/static/images/mine/coommon_icon_boy01@2x.png'), gender: 0 },
                { img: require('@/static/images/mine/coommon_icon_girl01@2x.png'), gender: 1 },
            ],
            // 选择设备弹窗
            schoolShow: false,
            schoolList: [],
            classShow: false,
            classList: [
                [
                    { label: '一年级', value: 0, }, { label: '二年级', value: 1, }, { label: '三年级', value: 2, }, { label: '四年级', value: 3, }, { label: '五年级', value: 4, }, { label: '六年级', value: 5, },
                    { label: '初一', value: 0, }, { label: '初二', value: 1, }, { label: '初三', value: 2, },
                ],
                [
                    { label: '（1）班', value: 0, }, { label: '（2）班', value: 1, }, { label: '（3）班', value: 2, }, { label: '（4）班', value: 3, }, { label: '（5）班', value: 4, },
                    { label: '（6）班', value: 5, }, { label: '（7）班', value: 6, }, { label: '（8）班', value: 7, }, { label: '（9）班', value: 8, }, { label: '（10）班', value: 9, },
                    { label: '（11）班', value: 10, }, { label: '（12）班', value: 11, }, { label: '（13）班', value: 12, }, { label: '（14）班', value: 13, }, { label: '（15）班', value: 14, },
                    { label: '（16）班', value: 15, }, { label: '（17）班', value: 16, }, { label: '（18）班', value: 17, }, { label: '（19）班', value: 18, }, { label: '（20）班', value: 19, },
                ],
            ],
            isLogin: false,
            bindLoading: false,
        }
    },
    onLoad(option) {
        if (option.login) {
            this.isLogin = true
            this.childrenData.defStatus = 1
        }
        this.getSchoolList()
    },
    computed: {
        disabledFun() {
            if (this.schoolName == '' || this.gradeClass == '' || this.childrenData.childrenName == '') {
                return true
            }
            return false
        }
    },
    methods: {
        getSchoolList() {
            this.$api.getSchool({}, res => {
                console.log("this.schoolListthis.schoolList", res.data[0].address)
                //            if (res.data.length != 0) {
                //                res.data.forEach((ele, index) => {
                //                    if (ele.schoolId == '0') {
                //                        res.data.splice(index, 1)
                //                    }
                //                });
                //                this.schoolList = res.data

                //            }
                this.schoolList = res.data
            });
        },
        changceGender(index) {
            this.sexSelectIndex = index
            if (index == 0) {
                this.childrenData.gender = false
            } else {
                this.childrenData.gender = true
            }
        },
        // 点击actionSheet回调
        schoolSelectCallback(e) {
            console.log('>>>>>>>>>>>>>schoolName', e)
            this.schoolName = e[0].label
            this.childrenData.schoolName = e[0].label
            this.childrenData.schoolId = e[0].value
        },
        classSelectCallback(e) {
            this.gradeClass = e[0].label.replace('级', '') + e[1].label
            this.childrenData.grade = e[0].label.replace('级', '') + e[1].label
            this.childrenData.childrenClass = e[0].label
        },
        bindChildrenClick() {
            let _this = this
            this.bindLoading = true
            this.childrenData.memberId = uni.getStorageSync('userInfo').id
            this.$api.addChildren(this.childrenData, res => {
                console.log('<<<<<<<<<<<<<<<<<<<<<<<', res)
                if (res.code == 0) {
                    this.$interactive.toast('添加成功')
                    this.childrenData.defStatus = 0
                    setTimeout(() => {
                        _this.$goto('back')
                    }, 500);
                } else {
                    this.$interactive.toast('添加失败')
                }
                this.bindLoading = false
            });
        },
    }
}
</script>

<style lang="scss" scoped>
.bind_box {
    position: relative;
    top: 200rpx;
    width: 90%;
    margin: auto;
    .bind_text {
        font-size: 48rpx;
        color: #333;
        font-weight: bold;
    }
    .sex_box {
        margin-top: 60rpx;
        .sex_item {
            flex: 1;
            height: 100rpx;
            background: #fff;
            border-radius: 50rpx;
            border: 1rpx solid #fff;
            transition: all 0.3s;
            &.active {
                background: #f0f9ff;
                border: 1rpx solid #63b9f2;
            }
            .sex_avatar {
                width: 76rpx;
                height: 76rpx;
                margin-right: 20rpx;
            }
        }
        .sex_item + .sex_item {
            margin-left: 40rpx;
        }
    }
    .children_info_box {
        margin-top: 30rpx;
        background: #fff;
        border-radius: 50rpx;
        padding: 30rpx;
    }
}
</style>
